<!--单图上传组件/按钮-->
<template>
  <el-upload
    ref="upload"
    :headers="headers"
    :limit="limit"
    :action="uploadUrl"
    list-type="picture-card"
    accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.GIF"
    :on-remove="handleRemove"
    :on-success="onSuccess"
    :file-list="fileList"
    :on-exceed="handleExceed"
    :before-upload="beforeAvatarUpload"
  >
    <i class="el-icon-plus" />
  </el-upload>
</template>

<script>
// import { getToken } from "@/utils/auth"

export default {
  name: "SingleUpload",
  props: {
    value: {
      type: String,
      default: ""
    },
    imgUrl: {
      type: Array,
      default() {
        return []
      }
    },
    imgListOrigin: {
      type: Array,
      default() {
        return []
      }
    },
    drag: {
      type: Boolean,
      default: false
    },
    api: {
      type: String,
      default: ""
    },
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      dialogVisible: false,
      headers: {
        Authorization:
          "eyJhbGciOiJIUzI1NiIsInppcCI6IkRFRiJ9.eNp8U79v1DAU_l88H9ROHNvpBunQDFRIZQFFQk7i3kUldpTYQ6k6ILiqSB1aCSEGFgZEpyIxUOlU8dcQrkz9F3CSS-5ORfUQ-b3v_fi-95xDYCpRhnJPgU1wGAGeJMpIvWPyWJQR2IxAECD_0daTcCcCI4uPhfVCe0tKwbUIU2uiwXyW5Q2OiA8pdR2MIGxiszaKuIQQjCGhGCLmI4Zb6OlEafWYJ_ttu408k5nqvg9ik-wLvSES5MYoZQzH2HF4SniCKCYexHscYg-_tP0QdQhkDPnuw0KOW66ZXNJxEPIcCBd0pDJ6V3NtqgX7Fc-u7nTXVz_q6df68-z2-uTmzent9fuuaBWovHgldD-HpWPI_DWtL0_rj-8WCVtiLTxMu-kGE9FqbrzSdi7FmjFUO57-fXvxezarzz-1BVU55jJ7zXWmZKBS0UZZYXfAbjeEecxDDmUOoZ6LHNJMvZgoKVaW3OZWypRJT6Lqx7M0BkZn3-cfLtoULSSXOlxbr-shTImPIWsCDoq-opGZvsO3cd7D0xTp6iPrzH6rFCLiUc8n3VabhzzUf7H9fBv2B3WtLC553uE3P6fz2bf55Zf52bEdrNXz5-QqAkdgBLQtbwXnRdPCdnARRD5x6WhQa3-V_6i1qZWJLVblFTj6BwAA__8.is1nEhWRqtUHxs-VrUuzx7gw7KCffx7MPhJH1exg2AI"
      },
      picList: [],
      fileList: []
    }
  },
  computed: {
    uploadUrl() {
      return this.api
    }
  },
  watch: {
    imgUrl() {
      this.filelist = []
      this.fileList = this.imgUrl.map((item, index) => {
        return {
          uid: Math.random(),
          url: item,
          origin: this.imgListOrigin[index]
        }
      })
    }
  },
  created() {},
  methods: {
    handleRemove(file, fileList) {
      const imgNew = fileList.map((item) => item.origin).join()
      this.$emit("input", imgNew)
    },
    onSuccess(res) {
      const imgOld = this.value
      if (res.result.code === "000000") {
        const path = res.result.data.path
        const picList = imgOld ? imgOld.split(",") : []
        picList.push(path)
        const imgNew = picList.join()
        this.$emit("input", imgNew)
      }
    },
    removeImage(file) {
      console.log(file)
    },

    handleExceed() {
      this.$message({
        message: `最多只能上传 ${this.limit} 张图片`,
        type: "warning"
      })
    },
    emitInput(val) {
      this.$emit("input", val)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!")
      }
      return isLt2M
    }
  }
}
</script>

<style lang="scss" scoped>
.el-upload__tip {
  margin: 0 0 0 15px;
}
</style>
